<ng-container *ngIf="uiState$ | async as uiState">
  <div class="col-2 environments-menu d-flex flex-column h-100" [ngClass]="{'opened': uiState.environmentsMenuOpened}" MousedragDeadzone>
    <div>
      <ul class="nav menu-header d-flex justify-content-between">
        <li class="nav-item add-environment-container">
          <a class="nav-link text-primary add-environment" (click)="addEnvironment()" ngbTooltip="Add environment">
            <i class="material-icons">add_box</i>
          </a>
        </li>
        <li class="nav-item ml-auto">
          <a class="nav-link toggle-environments-menu" (click)="toggleMenu()">
            <i class="material-icons">menu</i>
          </a>
        </li>
      </ul>
    </div>
    <ng-container *ngIf="(environments$ | async) as environments">
      <ul class="nav flex-column flex-fill menu-list" #environmentsMenu dragula="environments"
        [dragulaModel]="environments">
        <ng-container *ngIf="environmentsStatus$ | async as environmentsStatus">
          <li *ngFor="let environment of environments" class="nav-item" [ngClass]="{'pattern-danger': environmentsStatus[environment.uuid]?.disabledForIncompatibility}" [ngbTooltip]="(environmentsStatus[environment.uuid]?.disabledForIncompatibility) ? 'Environment was created with a more recent version of Mockoon. Please upgrade.' : ''">
            <a class="nav-link position-relative"
              [ngClass]="{'active': (activeEnvironment$ | async)?.uuid === environment.uuid, 'running': environmentsStatus[environment.uuid].running && !environmentsStatus[environment.uuid].needRestart, 'need-restart': environmentsStatus[environment.uuid].needRestart}"
              (click)="selectEnvironment(environment.uuid)"
              (contextmenu)="openContextMenu(environment.uuid, $event)">
              <div class="ellipsis environment-name">
                <ng-container *ngIf="uiState.environmentsMenuOpened">{{environment.name ? environment.name : '&nbsp;'}}</ng-container>
                <ng-container *ngIf="!uiState.environmentsMenuOpened">&nbsp;{{environment.name | slice:0:2}}</ng-container>
              </div>
              <div *ngIf="uiState.environmentsMenuOpened" class="menu-subtitle ellipsis">
                <span>0.0.0.0:{{environment.port}}/{{environment.endpointPrefix}}</span>
              </div>
              <div *ngIf="environment.proxyMode" class="server-icons server-icons-proxy-mode">
                <i class="material-icons" ngbTooltip="Proxy mode enabled">security</i>
              </div>
              <div *ngIf="environment.https" class="server-icons server-icons-https">
                <i class="material-icons" ngbTooltip="HTTPS enabled">https</i>
              </div>
              <div *ngIf="environment.cors" class="server-icons server-icons-cors">
                <i class="material-icons" ngbTooltip="CORS enabled">shuffle</i>
              </div>
            </a>
          </li>
        </ng-container>
      </ul>
    </ng-container>
  </div>
</ng-container>
